<script setup lang="ts">
import {computed, h, ref} from 'vue';
import {
  HomeOutlined,
  BarsOutlined,
  ProjectOutlined,
  DatabaseOutlined,
  AppstoreOutlined,
  UserOutlined,
  LogoutOutlined,
  ArrowLeftOutlined,
  TeamOutlined
} from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import { useRouter, useRoute } from 'vue-router';
import {useLayoutsStore} from "@/stores/LayoutsState.ts";
import {storeToRefs} from "pinia";
import {useUserInfoStore} from "@/stores/UserInfo.ts";
const router = useRouter();
const route = useRoute();
const current = ref<string[]>(['home']);
const layoutStore = useLayoutsStore();
const { state } = storeToRefs(layoutStore);
const userStore = useUserInfoStore();

// 判断是否在题目详情页
const isProblemDetailPage = computed(() => route.name === 'problemDetail');

const userInfo = computed(() => userStore.currentUser);
const isAdmin = computed(() => userStore.isAdmin());

const items = computed<MenuProps['items']>(() => {
  const baseItems: MenuProps['items'] = [
    {
      key: 'home',
      icon: () => h(HomeOutlined),
      label: '首页',
      title: '首页',
    },
    {
      key: 'questionBank',
      icon: () => h(ProjectOutlined),
      label: '题库',
      title: '题库',
    },
    {
      key: 'assessment',
      icon: () => h(DatabaseOutlined),
      label: '测评',
      title: '测评',
    },
    {
      key: 'rank',
      icon: () => h(BarsOutlined),
      label: '排行榜',
      title: '排行榜',
    },
    {
      key: 'organization',
      icon: () => h(TeamOutlined),
      label: '组织',
      title: '组织',
    },
  ]

  if (isAdmin.value) {
    baseItems.push({
      key: 'adminCenter',
      icon: () => h(AppstoreOutlined),
      label: '管理中心',
      title: '管理中心',
    })
  }
  return baseItems
})

const handleClick: MenuProps['onClick'] = menuInfo => {
  const routeName = menuInfo.key as string;
  if (routeName && router.hasRoute(routeName)) {
    router.push({ name: routeName });
    if(routeName === 'adminCenter'){
        state.value ='admin'
    }
  } else {
    console.warn('未找到对应路由:', menuInfo.key);
  }
};

const loginOrRegister = (type: string) =>{
  router.push({ name: type });
}

const handleMenuClick: MenuProps['onClick'] = e => {
  if (e.key === 'logout') {
    userStore.clearUser();
    router.push('/login');
  }else {
    router.push('personal')
  }
};

// 返回题库
const backToQuestionBank = () => {
  router.push({ name: 'questionBank' });
};
</script>
<template>
  <!-- 题目详情页的简化版 Header -->
  <div v-if="isProblemDetailPage" class="w-full h-full px-6 flex items-center gap-4">
    <img src="/src/assets/imgs/logo.png" alt="网站图标" class="w-12 h-12">
    <a-button
      type="text"
      @click="backToQuestionBank"
      class="flex items-center gap-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-3 py-2 rounded-lg transition-all duration-200"
    >
      <ArrowLeftOutlined class="text-base" />
      <span class="font-medium">返回题库</span>
    </a-button>
  </div>

  <!-- 常规页面的完整 Header -->
  <div v-else class="mx-auto w-[1080px] flex">
      <a-col :span="4" class=" flex items-center">
        <img src="/src/assets/imgs/logo.png" alt="网站图标" class="w-14 h-14 mr-2">
        <h1 class="h-14 text-base  pt-6">HZIEE OJ</h1>
      </a-col>
      <a-col :span="16" class="bg-orange-200">
        <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" @click="handleClick"/>
      </a-col>
      <a-col v-if="!userInfo" :span="4" >
        <a @click="loginOrRegister('login')">登录</a> ｜ <a @click="loginOrRegister('register')">注册</a>
      </a-col>
      <a-col v-else :span="4">
        <a-dropdown :trigger="['click']" >
          <template #overlay>
            <a-menu @click="handleMenuClick">
              <a-menu-item key="1">
                <UserOutlined />
                个人中心
              </a-menu-item>
              <a-menu-item key="logout">
                <LogoutOutlined />
                退出登录
              </a-menu-item>
            </a-menu>
          </template>
          <a-avatar :size="50"
            src="https://creative-3605.oss-cn-hangzhou.aliyuncs.com/creative-online-judge-prod/user/11801697558994_.pic.jpg!user_avatar"
          />

        </a-dropdown>
      </a-col>
  </div>
</template>

<style scoped>

</style>
